/**
 * @Name:  MoveSort
 * @Author: 
 * @Desc:  移动排序
 * @Date: 2021-02-08 09:50:55
 */
import React, { Component } from "react";
import { ReactSortable } from "react-sortablejs";
import { Title } from "@/component";
import { Form, Button, Input } from "antd";
import styles from "./styles.module.less";

const data = [
  { code: "00", img: "https://picsum.photos/id/237/200/115" },
  { code: "01", img: "https://picsum.photos/id/202/200/115" },
  { code: "02", img: "https://picsum.photos/id/212/200/115" },
  { code: "03", img: "https://picsum.photos/id/267/200/115" },
  { code: "04", img: "https://picsum.photos/id/137/200/115" },
  { code: "05", img: "https://picsum.photos/id/147/200/115" }
];
function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some((field) => fieldsError[field]);
}
class passReset extends Component {
  componentDidMount() {
    // To disable submit button at the beginning.
    this.props.form.validateFields();
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
      }
    });
  };
  compareToFirstPassword = (rule, value, callback) => {
    const { form } = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(["confirm"], { force: true });
    }
    callback();
  };
  hasErrors = (fieldsError) => {
    return Object.keys(fieldsError).some((field) => fieldsError[field]);
  };
  render() {
    const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
    // const { getFieldDecorator } = this.props.form;
    const oldPassWordError = isFieldTouched("oldPassWord") && getFieldError("oldPassWord");
    const newPassWordError = isFieldTouched("newPassWord") && getFieldError("newPassWord");
    const againPassWordError = isFieldTouched("againPassWord") && getFieldError("againPassWord");
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    };
    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit} className={styles.login_form}>
        <Form.Item label="旧密码" validateStatus={oldPassWordError ? "error" : ""}>
          {getFieldDecorator("oldPassWord", {
            rules: [
              { whitespace: true, required: true, message: "密码不能为空" },
              { type: "string", min: 6, message: "密码至少6位" }
            ]
          })(<Input.Password placeholder="请输入旧密码" />)}
        </Form.Item>
        <Form.Item label="新密码" validateStatus={newPassWordError ? "error" : ""}>
          {getFieldDecorator("newPassWord", {
            rules: [
              { whitespace: true, required: true, message: "密码不能为空" },
              { type: "string", min: 6, message: "密码至少6位" }
            ]
          })(<Input.Password placeholder="请输新密码" />)}
        </Form.Item>
        <Form.Item label="确认密码" validateStatus={againPassWordError ? "error" : ""}>
          {getFieldDecorator("againPassWord", {
            rules: [
              { whitespace: true, required: true, message: "密码不能为空" },
              { type: "string", min: 6, message: "密码至少6位" }
            ]
          })(<Input.Password placeholder="请再次输入新密码" />)}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" disabled={hasErrors(getFieldsError())}>
            确定
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(passReset);

export default class MoveSort extends Component {
  state = {
    moveList: data
  };
  /**
   * @name itemUpdate
   * @param {Array} arr 完成移动后数组
   */
  itemUpdate = (arr) => {
    this.setState({ moveList: arr });
  };

  render() {
    const { moveList } = this.state;

    return (
      <div>
        <div className={styles.block}>
          <Title text="移动排序" />
          <ul className={styles.uls}>
            <ReactSortable group="root" list={moveList} setList={this.itemUpdate}>
              {moveList.map((v) => (
                <li key={v.code} className={styles.lis}>
                  <img src={v.img} />
                </li>
              ))}
            </ReactSortable>
          </ul>
        </div>
        <WrappedNormalLoginForm />
      </div>
    );
  }
}
